import React, { Component } from 'react'
import { Outlet } from 'react-router-dom'
import { get } from '@/utils/requestUtil'
import { Layout, Button, Menu } from 'antd'
import {
  MenuUnfoldOutlined, DesktopOutlined, WeiboOutlined,
  MenuFoldOutlined, PieChartOutlined, AppstoreOutlined
} from '@ant-design/icons'
import { withRouterContext } from '@/context/router/routerContext'
import { getContext } from '@/context/common/applicationContext'

const { Header, Content, Footer, Sider } = Layout

/**
 * 爬取页面的公共入口，
 */
class CrawlMain extends Component {

  state = {
    user: null,
    items: [
      {
        key: 'crawlHome',
        icon: <PieChartOutlined />,
        label: '基本视图',
      },
      {
        key: 'crawlPersonal',
        icon: <DesktopOutlined />,
        label: '个人任务',
      },
      {
        key: 'crawlCenter',
        icon: <AppstoreOutlined />,
        label: '爬取中心',
        children: [
          {
            key: 'weiboCrawl',
            icon: <WeiboOutlined />,
            label: '微博爬取',
          }
        ]
      }
    ],
    collapsed: false //菜单是否收缩
  }

  async componentDidMount() {
    //获取当前登陆用户的信息
    const response = await get('/customer/getCurrentCustomer')
    let user = response && response.data ? response.data : {}
    await new Promise(resolve => {
      this.setState({ user }, () => {
        this.props.setContextValue && this.props.setContextValue({ user })
        resolve()
      })
    })
  }

  //菜单点击事件
  onMenuClick = ({ key }) => {
    const { navigate } = this.props
    switch (key) {
      case 'crawlHome':
        navigate('/jms/crawl')
        break
      case 'weiboCrawl':
        navigate('/jms/crawl/weibo')
        break
      case 'crawlPersonal':
        navigate('/jms/crawl/personal')
        break
      default:
        break
    }
  }

  toggleCollapsed = async () => {
    await new Promise(resolve => {
      this.setState({ collapsed: !this.state.collapsed }, resolve)
    })
  }

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div style={{
            height: '60px',
            color: 'white',
            fontWeight: 'bolder',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: this.state.collapsed === true ? '10px' : '20px'
          }}>
            jmsCrawl
          </div>
          <Menu
            defaultSelectedKeys={['crawlHome']}
            mode="inline"
            theme="dark"
            items={this.state.items}
            onClick={this.onMenuClick}
          />
        </Sider>
        <Layout
          style={{
            height: '100vh'
          }}
        >
          <Header
            style={{
              height: '60px',
              backgroundColor: '#001529'
            }}
          ><Button
            type="primary"
            onClick={this.toggleCollapsed}
            style={{
              marginBottom: 16,
            }}
          >
              {this.state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button></Header>
          <Content
            style={{
              backgroundColor: 'white',
              margin: '20px 20px 0 20px',
              borderRadius: '10px',
              position: 'relative'
            }}
          >
            <div style={{ overflow: 'auto', height: '100%', padding: 10 }}>
              <Outlet />
            </div>
          </Content>
          <Footer
            style={{
              height: '60px',
              textAlign: 'center'
            }}
          >
            Copyright © 2024 jmsCrawl 金木三数据爬取平台
          </Footer>
        </Layout>
      </Layout>
    )
  }
}

export default getContext(withRouterContext(CrawlMain))